{% extends "base.html" %}

{% block head %}
    {{ super() }}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="分享 GitHub 入门级、有趣的开源项目。推广自己的开源项目、编程实践项目、适合练手的开源项目、HelloGitHub月刊">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/grids-responsive-min.css')}}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/home.css')}}">
{% endblock %}

{% block body %}
<div class="pure-menu pure-menu-horizontal">
    <a href="/" class="pure-menu-heading">Hello GitHub</a>
    <ul class="pure-menu-list" style="float: right;">
        {% if session.is_login %}
            <li class="pure-menu-item">
                <a class="pure-menu-link" href="/profile/collection/">
                    <img class="pure-menu-avatar" src="{{ user_info.avatar_url }}">
                    我的收藏
                </a>
            </li>
        {% else %}
            <li class="pure-menu-item"><a href="/sign/in/" class="pure-menu-link">Sign in</a></li>
        {% endif %}
    </ul>
</div>

<div class="banner">
    <h1 class="banner-head">
        分享 GitHub 上<br>
        有趣、入门级的开源项目
    </h1>
</div>

<div class="l-content">
    <div class="pricing-tables pure-g">

        {# 期刊 #}
        <div class="pure-u-1 pure-u-md-1-3">
            <div class="pricing-table pricing-table-color1">
                <div class="pricing-table-header">
                    <h2>已发布</h2>

                    <span class="pricing-table-price">
                        {{ volumes.__len__() }} <span>期</span>
                    </span>
                </div>

                <ul class="pricing-table-list">
                    <li>
                        每月 28 号发布最新一期
                    </li>
                    <li>
                    <label>选择一期：
                        <select id="volume" onchange="get_select(this.id)">
                            {% for volume in volumes %}
                                <option value="/volume/{{ volume.name }}/">{{ volume.name }}</option>
                            {% endfor %}
                        </select>
                    </label>
                    </li>
                </ul>

                <a id="volume-button" class="button-choose pure-button" href="/volume/{{ volumes[0].name }}/">阅读</a>
            </div>
        </div>
        {# 类别 #}
        <div class="pure-u-1 pure-u-md-1-3">
            <div class="pricing-table pricing-table-color2">
                <div class="pricing-table-header">
                    <h2>分类共有</h2>

                    <span class="pricing-table-price">
                       {{ categories.__len__() }} <span>类</span>
                    </span>
                </div>

                <ul class="pricing-table-list">
                   <li>
                        编程语言不是学习和进阶的壁垒
                    </li>
                    <li>
                    <label>选择分类：
                        <select id="category" onchange="get_select(this.id)">
                            {% for category in categories %}
                                {% if category.name == select_category.name %}
                                    <option selected>{{ category.name }}</option>
                                {% else %}
                                    <option value="/category/{{ category.quote_name }}/">{{ category.name }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </label>
                    </li>
                </ul>

                <a id='category-button' class="button-choose pure-button" href="/category/{{ select_category.quote_name }}/">查看</a>
            </div>
        </div>
        {# 推荐项目 #}
        <div class="pure-u-1 pure-u-md-1-3">
            <div class="pricing-table pricing-table-color3">
                <div class="pricing-table-header">
                    <h2>项目总数</h2>

                    <span class="pricing-table-price">
                       {{ contents.__len__() }} <span>个</span>
                    </span>
                </div>

                <ul class="pricing-table-list">
                    <li>
                        欢迎推荐 GitHub 上的开源项目
                    </li>
                    <li>
                        或自己的开源项目
                    </li>
                </ul>

                <a target="_blank" class="button-choose pure-button" href="https://github.com/521xueweihan/HelloGitHub/issues/new">推荐</a>
            </div>
        </div>
    </div> <!-- end pricing-tables -->
    <div class="information pure-g">
        <div class="pure-u-1 pure-u-md-1-2">
            <div class="l-box">
                <h3 class="information-head">HelloGitHub是什么鬼</h3>
                <p>
                    最开始我只是想把自己在浏览 GitHub 过程中，发现的有意思、高质量、容易上手的项目收集起来，这样便于以后查找和学习。后来打算把这些有意思、有价值的开源项目分享给大家。最后就写了这个网站，便于查看和分享。
                </p>
            </div>
        </div>

        <div class="pure-u-1 pure-u-md-1-2">
            <div class="l-box">
                <h3 class="information-head">在这里你能得到什么</h3>
                <p>
                    各种语言的开源项目、让生活变得更美好的工具、书籍、学习笔记、教程等。通过这些项目你将学习到更多编程知识、提高自己的编程技巧、发现编程的乐趣。对于老司机我想说：还记得你上次开心地写代码是什么时候吗？
                </p>
            </div>
        </div>

        <div class="pure-u-1 pure-u-md-1-2">
            <div class="l-box">
                <h3 class="information-head">兴趣是最好的老师</h3>
                <p>
                    我是偶然的机会接触到了 Python，发现编程如此容易上手，有乐趣。然后开始写东西、解决问题、学习别人的代码，为了写出更有价值的程序。我发现什么"撸"多了，都上瘾，代码也是一样。
                </p>
            </div>
        </div>

        <div class="pure-u-1 pure-u-md-1-2">
            <div class="l-box">
                <h3 class="information-head">小伙伴快到碗里来</h3>
                <p>
                    在 GitHub 上你能做的不只是编程：会编程的可以贡献代码，不会编程的可以反馈使用这些工具中的 Bug、帮着宣传你觉得优秀的项目、Star 项目。注册个 GitHub 帐号，加入开源社区，老铁还等什么快点上车。
                </p>
            </div>
        </div>
    </div><!-- end information -->
</div> <!-- end l-content -->

<div class="footer l-box">
    <p>
        <a target="_blank" href="https://github.com/521xueweihan">Follow @521xueweihan on GitHub</a><br>
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo">
            <img style="width: 18px;vertical-align: sub;" src="https://hellogithub.com/img/filing.png"/>京公网安备 11010802023873号
        </a>
        <a target="_blank" href="http://www.miitbeian.gov.cn/publish/query/indexFirst.action">
            京ICP备 17046648号
        </a>
    </p>
</div>
{% endblock %}

{% block js %}
<script>
function get_select(x)
{
    document.getElementById(x+"-button").href=document.getElementById(x).value;
}
</script>
{% endblock %}